<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="../../layout/base/base.css">
    <link rel="stylesheet" href="com-check.css">
    <script src="../../lib/jquery.js"></script>
    <script src="com-check.js"></script>
</head>
<style>
    .demo{
        width:800px;
        min-height: 400px;
        margin:0 auto;
        padding:10px;
        border: 1px solid #ebebeb;
    }
</style>
<body>

<div class="feat-reset demo clearfix">

    <section data-name="com-check" class="com-check">
        <label data-name="checkAll">
            <i data-name="allStyle" class="check-box"></i>
            <span>全选</span>
        </label>

        <label class="ml15">
            <i data-name="checkStyle" class="check-box"></i>
            <span>小李</span>
            <input type="checkbox" value="小李">
        </label>

        <label>
            <i data-name="checkStyle" class="check-box box-add"></i>
            <span>小红</span>
            <input type="checkbox" value="小红" checked>
        </label>

    </section>

    <!--<input class="mt20" type="button" value="点击我" onclick="clicks()">-->
  
</div>

<script>

    /**
     * @必须拥有包含com-check属性的父级
     *
     * @事件方法：clickHandler
     * @参数：clickObj 为当前input的JQ实例
     *
     * @实例方法getDomVal包含选中的数组
     **/

    var comCheckObj = $('.com-check').comCheck({
        clickHandler:function(clickObj){
            console.log(clickObj.prop('checked'));
            console.log(comCheckObj)
        }
    });
    function clicks(){
        console.log(comCheckObj)
    }


/*
    var observer=new MutationObserver(function(MutationRecord){});
    observer.observe('',{
        childList: true,
        attributes: true,
        subtree: true,
        attributeOldValue: true,
        attributeFilter:['checked'],
        //节点内容或节点文本的变动
        characterData: true,
        characterDataOldValue: true
    });
*/
</script>
</body>
</html>